<template>
  <MkPanel title="用血信息">
    <template #header>
      <div class="transfusion-header">
        <span>用血</span>
        <div class="tag-container" v-if="isEdit">
          <el-checkbox label="申请多品种" v-model="model.shenQingDuoPinZhong" />
          <el-checkbox label="修改申请血型" v-model="xiuGaiShenQingXueXing" />
        </div>
      </div>
    </template>
    <MkForm :col="4" :model="model" formId="traYongXueXinXi" ref="yongXueRef">
      <MkSelect label="用血类型" v-model="model.yongXueLeiXing" prop='yongXueLeiXing' :isEdit="isEdit" required
        :options='["治疗用血", "手术备血", "术中用血"]' selectId="TraXueYe_yongXueLeiXing" />
      <MkSelect label="输血目的" v-model="model.shuXueMuDi" prop='shuXueMuDi' :isEdit="isEdit" required filterable
        allow-create :options='["纠正贫血", "改善凝血功能障碍", "手术备血", "血浆置换", "补充纤维蛋白原", "补充血小板", "支持治疗", "预防出血", "术中用血"]' />
      <MkSelect label="申请ABO" v-model="model.shenQingABO" prop='shenQingABO' required :isEdit="xiuGaiShenQingXueXing"
        :options='["A", "B", "O", "AB", "未知"]' />
      <MkSelect label="申请Rh(D)" v-model="model.shenQingRhD" prop='shenQingRhD' required :isEdit="xiuGaiShenQingXueXing"
        :options='["+", "-", "未知"]' />
      <el-row>
        <MkSelectBasEntity label='申请品种' v-model='model.shenQingPinZhong' prop='shenQingPinZhong' :isEdit='isEdit'
          required entity="BasXueYePinZhong" />
        <MkInputNumber label="申请量" v-model="model.shenQingLiang" prop='shenQingLiang' :isEdit="isEdit" required>
          <template #suffix>
            <span>{{ getDanWei(model.shenQingPinZhong) }}</span>
          </template>
        </MkInputNumber>
        <MkFormDateTime required label="计划用血时间" v-model="model.yongXueShiJian" prop='yongXueShiJian' :isEdit="isEdit" />
        <MkSelectEnum label="特殊处理" v-model="model.teShuChuLi" prop='teShuChuLi' :isEdit="isEdit"
          :enumType="enumType.ShenQingTeShuChuLi" />
      </el-row>
      <el-row v-if="model.shenQingDuoPinZhong">
        <MkSelectBasEntity label="申请品种2" v-model="model.shenQingPinZhong2" prop='shenQingPinZhong' :isEdit="isEdit"
          entity="BasXueYePinZhong" />
        <MkInputNumber label="申请量" v-model="model.shenQingLiang2" prop='shenQingLiang' :isEdit="isEdit"
          :required="model.shenQingPinZhong2">
          <template #suffix>
            <span>{{ getDanWei(model.shenQingPinZhong2) }}</span>
          </template>
        </MkInputNumber>
        <MkFormDateTime label="计划用血时间" v-model="model.yongXueShiJian2" prop='yongXueShiJian2' :isEdit="isEdit"
          :required="model.shenQingPinZhong2" />
        <MkSelectEnum label="特殊处理" v-model="model.teShuChuLi2" prop='teShuChuLi2' :isEdit="isEdit"
          :enumType="enumType.ShenQingTeShuChuLi" />
      </el-row>
      <el-row v-if="model.shenQingDuoPinZhong">
        <MkSelectBasEntity label="申请品种3" v-model="model.shenQingPinZhong3" prop='shenQingPinZhong' :isEdit="isEdit"
          entity="BasXueYePinZhong" />
        <MkInputNumber label="申请量" v-model="model.shenQingLiang3" prop='shenQingLiang' :isEdit="isEdit"
          :required="model.shenQingPinZhong3">
          <template #suffix>
            <span>{{ getDanWei(model.shenQingPinZhong3) }}</span>
          </template>
        </MkInputNumber>
        <MkFormDateTime label="计划用血时间" v-model="model.yongXueShiJian3" prop='yongXueShiJian3' :isEdit="isEdit"
          :required="model.shenQingPinZhong3" />
        <MkSelectEnum label="特殊处理" v-model="model.teShuChuLi3" prop='teShuChuLi3' :isEdit="isEdit"
          :enumType="enumType.ShenQingTeShuChuLi" />
      </el-row>
      <MkInput v-model="model.yongXueBeiZhu" label="备注" :isEdit="isEdit" />
    </MkForm>
    <div class="footer">
      <span>一天内申请备血量 {{ totalApplySum }} ml</span>
    </div>
  </MkPanel>
</template>
<script lang="ts" setup>
/* 申请血液信息
单独子表管理, 与主表一一对应, 多品种用增加字段来实现, 最多一次申请三个品种
为了业务清晰明了, 申请血型只能有一个(即使多品种), 如果申请不同的品种,血型也不同应该另外开一张申请单
选择申请品种后需要带出血液单位
输血目的要修改为可以输入的下拉框
一天内备血量: 从统一的逻辑获取 (保障与大量用血计算的取数一致)
申请血型如果与患者血型不一致需要高亮输入框背景
输血目的改为多选: 优化 MkSelect 支持多选
输血目的支持手动输入: 优化 MkSelect 支持手动输入
*/
import { TraShenQingYongXueInput } from '/@/api/tra/TraShenQing';
import { getXueYePinZhongInfo } from '/@/stores/baseInfo';
import { enumType } from '/@/const';
defineOptions({
  name: 'editBlood',
});

const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false,
  },
});

const model = defineModel({ required: true, default: {} as TraShenQingYongXueInput })
const yongXueRef = ref()
const xiuGaiShenQingXueXing = ref(false)

// 总申请量
const totalApplySum = computed(() => {
  let result = 0
  return result
})
/** 获取品种单位 */
const getDanWei = (pinZhongId?: number) => {
  if (!pinZhongId) return ''
  const id = Number(pinZhongId)
  const pinZhong = getXueYePinZhongInfo(id)
  return pinZhong?.danWei ?? ''
}
const validate = async () => {
  return await yongXueRef.value.validate()
}
defineExpose({ validate })
</script>
<style lang="scss" scoped>
.transfusion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag-container {
  display: flex;
  gap: 0.5rem;
  margin-left: 3rem;
}

.footer {
  padding: 0 6px 5px 6px; // 调整边距
}
</style>
